<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>History</title>
</head>
<body>
  <div>
    <input type="button" value="PushState" onclick="pushState()">
  </div>

  <script>
    // ------- 导航 go() 方法 ------
    // 后退一页
    // history.go(-1);
    // 前进一页
    // history.go(1);
    // 前进两页
    // history.go(2);

    // 后退一页
    // history.back();
    // 前进一页
    // history.forward();

    // ------- 历史状态管理 -------
    function pushState() {
      console.log("pushState");
      let stateObject = { foo: "bar" };
      history.pushState(stateObject, "My title", "https://baidu.com");
    }

    // history.replaceState({ newFoo: "newBar" }, "New title");
    window.addEventListener("popstate", (event) => {
        let state = event.state;
        if (state) { // 第一个页面加载时状态是 null
          processState(state);
        }
    });
    
  </script>
</body>
</html>